<template>
    <div class="layout">
        <!--<template>
            <mu-appbar :class="[{ 'nav-hide': !menuOpen||(this.$root.miniMal&&menuOpen)}, 'main-appbar']">
                <mu-icon-button v-if="this.$root.miniMal" icon="menu" slot="left" @click="toggle"/>
                <mu-flat-button @click="login_out" :label="this.$root.userInfo.username" slot="right"/>
                <mu-icon-button icon="expand_more" slot="right"/>
            </mu-appbar>
        </template>-->
       <!-- <template>
            <mu-drawer left :open="menuOpen" class="main-menu" :docked="!this.$root.miniMal" @close="toggle">
                <mu-appbar title="仟姿分期运营平台"/>
                <mu-list>
                    <tree-menu v-for="model in menus" :model="model" @menuClick="toggle"></tree-menu>
                </mu-list>
            </mu-drawer>
        </template>-->
        <div :class="[{ 'nav-hide': !menuOpen||(this.$root.miniMal&&menuOpen)}, 'main-content']">
            <mu-content-block>
                <router-view></router-view>
            </mu-content-block>
        </div>
        <template>
            <mu-paper class="paper-botton">
                <mu-bottom-nav :value="bottomNav" shift  @change="handleChange">
                    <mu-bottom-nav-item to="/admin/orders-submited" value="movies" title="Movies" icon="ondemand_video"/>
                    <mu-bottom-nav-item to="/admin/dashboard" value="music" title="Music" icon="music_note"/>
                    <mu-bottom-nav-item value="books" title="Books" icon="books"/>
                    <mu-bottom-nav-item value="pictures" title="Pictures" icon="photo"/>
                </mu-bottom-nav>
            </mu-paper>
        </template>
    </div>
</template>
<script>
    import {menus, resizeWidth} from "../router/config";
    export default {
        data () {
            this.$root.miniMal = true;
            return {
                menus: menus,
                menuOpen: !this.$root.miniMal,
                bottomNav: 'movies',
                bottomNavColor: 'movies'
            }
        },
        computed: {},
        methods: {
            toggle () {
                if (this.$root.miniMal) {
                    this.menuOpen = !this.menuOpen;
                }
            },
            login_out(){
                this.$bus.emit('USER_LOGIN_OUT');//退出登录
            },
            handleChange (val) {
                this.bottomNav = val
            }
        },
        created(){
            this.$bus.on('menuClick', this.toggle);
        },
        watch: {
            '$root.miniMal'(currVal, oldVal){
                this.menuOpen = !this.menuOpen;
            }
        },
        mounted(){
            /*var self = this;
            window.onresize = function temp() {
                var preStat = self.miniMal;
                self.$root.miniMal = (resizeWidth >= document.body.clientWidth);

            };*/
        },
    }
</script>
